<template>
	<view class="content">
		<!-- Swiper section remains unchanged -->
		<view v-if="swiperImgs.length" style="position: relative">
			<view class="qm-banner-underImg uperUderImg">
				<view class="aaaa" v-for="(item, index) in underImgList"
					:style="{'opacity': index == currentIndex ? '1' : '0'}">
					<image lazy-load :src="item.underImg" style="width: 100%; height:350px"></image>
				</view>
			</view>
			<swiper class="v-qm-banner" style="height:350px" :autoplay="true" circular :indicator-dots="false"
				:data-index="currentIndex" @change="swiperChange">
				<swiper-item class="swiper-item" v-for="(item2, index2) in swiperImgs" :key="index2">
					<view @tap="bindLink" :data-item="item2" style="height: 200px;">
						<image lazy-load mode="widthFix" class="image" :src="item2.img"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="custom-indicators">
				<view v-for="(item, index) in swiperImgs" :key="index"
					:class="{'indicator-dot': true, 'active-dot': index === currentIndex}"></view>
			</view>
		</view>

		<!-- Adjusted section -->
		<view class="header">
			<view style="margin-top: 10px;margin-bottom: 10px;">
				<view class="container1">
					<view class="left-column1">
						<view class="boxs1 invite1" @click="gopinpaigushi">
							<view class="header-text"><text>周卡/月卡</text></view>
							<text style="color: #999;margin-top: 3px;font-size: 13px;">成为至卡会员享受优惠</text>
							<image src="https://zjdemo.xuande.work:8889/photo/56a7e459002841498a47b5a3af252c6d.png" class="icon-heade-image">
							</image>
						</view>
					</view>
					<view class="right-column1">
						<view class="box1 join-group1" @click="gaoDandian">
							<image class="header-image" src="https://zjdemo.xuande.work:8889/photo/dab538a6ff0a4a6487351fd26402bc73.png">
							</image>
							<view class="text-column">
								<text style="font-weight: bold;font-size: 16px;" class="text-item">单点套餐</text>
								<text style="color: #999;" class="text-item">至减配送上门</text>

							</view>
						</view>
						<view class="box1 happy-money1" @click="saoma">
							<image class="header-image" src="https://zjdemo.xuande.work:8889/photo/8df54fd19852423a96ef36a0e37867f8.png">
							</image>
							<view class="text-column">
								<text style="font-weight: bold; font-size: 16px;" class="text-item">CDK扫码</text>
								<text style="color: #999;" class="text-item">专属优惠</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- Rest of the header section remains unchanged -->
			<view class="section white">
				<view class="item" @click="gopeifangyuanliao">
					<view class="icon">
						<image src="https://zjdemo.xuande.work:8889/photo/6a7ab453ad294edf9d9e153fd8eb52ef.png" class="icon-img"></image>
					</view>
					<view class="text">健身工作室</view>
				</view>
				<view class="item" @click="goZhiKa">
					<view class="icon">
						<image src="https://zjdemo.xuande.work:8889/photo/30491d9a595840c585107a8e89029400.png" class="icon-img"></image>
					</view>
					<view class="text">卡包</view>
				</view>
				<view class="item">
					<view class="icon">
						<image src="https://zjdemo.xuande.work:8889/photo/f0ab4b13423448d1ad25eb5e98044591.png" class="icon-img"
							@click="goYaoqingyouyli"></image>
					</view>
					<view class="text">联系客服</view>
				</view>
				<view class="item" @click="huodongzhongxin">
					<view class="icon">
						<image src="https://zjdemo.xuande.work:8889/photo/701ce2a6ae6f40a7925e651472290b91.png" class="icon-img"></image>
					</view>
					<view class="text">活动中心</view>
				</view>
			</view>
			
			<!-- 	<view class="left-column">
					<view class="boxs invite" @click="gopinpaigushi">
						<image src="@/static/品牌故事@3x.png" class="container_image"></image>
					</view>
				</view>
				<view class="right-column">
					<view class="box join-group" @click="goCDK">
						<image src="@/static/cdk兑换@3x.png" class="container_images"></image>
					</view>
					<view class="box happy-money">
						<image src="@/static/积分袋@3x.png" class="container_images"></image>
					</view>
				</view> -->
			<!-- <view><text>最新活动</text></view>	
				<image src="https://ffa.firstui.cn/uploadfile/240814235345770.png"></image> -->
				 <text >最新活动</text>
				    
				  <view class="home">
				  	<!--circular用来设置循环轮播   indicator-dots设置下面小圆点用来点击 -->
				  	<swiper circular  indicator-dots autoplay interval="3000" duration="500"> 
				  		<!-- v-for循环遍历数组 -->
				  		<swiper-item v-for="(item,index) in swipers" :key="index" @click="goHuoDong(index)">
				  			<image :src="item" class="lunbo"></image>
				  		</swiper-item>
				  	</swiper>
				  </view>
		
		</view>
	</view>
</template>

<script>
	import {
		url
	} from '@/utils/request.js';
	export default {
		data() {
			return {
				userName: '',
				currentIndex: 0,
				swipers:[
					'https://zjdemo.xuande.work:8889/photo/5fc0c54a368246a99cf4d6aee05af061.png',
					'https://zjdemo.xuande.work:8889/photo/24b9fbd02bc641f49c6bd8cbf0c3ffb0.png',
				],
				swiperImgs: [{
					index: 1,
			
					underImg: "https://pic.imgdb.cn/item/668d0603d9c307b7e9145580.png"
				}, {
					index: 2,
				
					underImg: "https://pic.imgdb.cn/item/668d0603d9c307b7e91455b8.png"
				}, {
					index: 3,
			
					underImg: "https://pic.imgdb.cn/item/668be071d9c307b7e91446fe.jpg"
				}, {
					index: 4,
					underImg: "https://pic.imgdb.cn/item/668d0604d9c307b7e9145616.png",
					
				}, {
					index: 5,
					underImg: "https://pic.imgdb.cn/item/668d0604d9c307b7e914565f.png",
				
				}],
				underImgList: [],
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 1000,
				current: 0,
			};
		},
		onLoad() {
			uni.loadFontFace({
				family: 'AlimamaDaoLiTiTTF',
				source: "url('https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/font/AlimamaDaoLiTi.ttf')",
				success() {
					console.log('loadFontFace Remote AlimamaDaoLiTi.ttf success')
				},
				fail(error) {
					console.warn('loadFontFace Remote AlimamaDaoLiTi.ttf fail', error.errMsg)
				},
			})
			this.handleSwiperData();
			console.log(111);
			uni.getStorage({
				key: 'avatarUrl',
				success: (res) => {
					console.log(res.data);
				}
			});
			// const that = this
			// const requestTask = uni.request({
			// 	url: url + '/wx/selectUserByOpenId', //仅为示例，并非真实接口地址。
			// 	data: {
			// 		openId: 'oVVwX7X9CXC-G3Bm2eKQVjZx5JV8'
			// 	},
			// 	success(res) {
			// 		console.log(res.data);
			// 		that.userImg = res.data.data.userImg
			// 		that.userName = res.data.data.userName
			// 		console.log(res.data.data.userImg)
			// 	}
			// });
		},
		methods: {
			gaoDandian(){
				uni.switchTab({
					url:'../order/order'
				})
			},
			goHuoDong(index){
			console.log(index)	
			if(index===0){
				uni.navigateTo({
					url:'../huodongOne/huodongOne'
				})
			}
			},
			saoma() {
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						uni.navigateTo({
							url: '../HuodongOneResult/HuodongOneResult?qrcode=' + res.result
						})
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
					}
				});
			},
			handleSwiperData() {
				var that = this;
				that.underImgList = [];
				that.swiperImgs.forEach((ele, index) => {
					that.underImgList.push({
						index: index,
						underImg: ele.underImg
					});
				});
			},
			swiperChange(current) {
				this.currentIndex = current.detail.current;
			},
			goZhiKa() {
				uni.navigateTo({
					url: '../youhuiquan/youhuiquan'
				});
			},
			goOrder() {
				uni.switchTab({
					url: '../order/order'
				});
			},
			goCDK() {
				uni.navigateTo({
					url: '../CDK/CDK'
				})
			},
			goYaoqingyouyli() {
				uni.navigateTo({
					url: '../yaoqingyouli/yaoqingyouli'
				})
			},
			huodongzhongxin(){
				uni.navigateTo({
					url:'../huodongzhongxin/huodongzhongxin'
				})
			},
			gopinpaigushi() {
				uni.switchTab({
					url: '../zhiCard/zhiCard'
				})
			},
			gopeifangyuanliao() {
				uni.navigateTo({
					url: '../peifangyuanliao/peifangyuanliao'
				})
			},
			sao() {
				console.log("你好啊");
			}
		}
	};
</script>

<style lang="scss">
	.lunbo{
		border-radius: 8px;
	}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20rpx;
}

.home{
		swiper{
			    margin-top: 6px;
			    height: 108px;
			image{
				width: 100%;
				height: 100%;
			}
		}
	}

/* 图片样式 */
.activity-image {
  width: 100%;
  max-width: 700rpx;
  height: 100px;
  border-radius: 10rpx;
}
	.header-image {
		height: 42px;
		width: 42px;
		margin-left: 5px;
	}

	.header-text {
		font-weight: bold;
		text-align: center;
		font-size: 20px;
	}

	.icon-heade-image {
		height: 81px;
		margin: 0px 45px 0px;
		width: 75px;
	}

	.custom-indicators {
		position: absolute;
		bottom: 10px;
		left: 35px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.indicator-dot {
		width: 8px;
		height: 8px;
		margin: 0 4px;
		background-color: grey;
		border-radius: 50%;
		transition: all 0.3s ease;
	}

	.active-dot {
		width: 20px;
		height: 8px;
		background-color: black;
		border-radius: 4px;
		margin: 0 4px;
	}

	.page {
		width: 100%;
		height: 100%;
	}

	.ones {
		height: 20px;
	}

	.content {
		height: 396px;
	}

	.swiper {
		height: 396px;
	}

	.swiper-item {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.fui-list__cell.data-v-21bbda1f {
		height: 20px;
	}

	.image {
		width: 100%;
		height: 120px;
		max-width: 100%;
		object-fit: cover;
	}

	.images {
		width: 100%;
		height: 396px;
		max-width: 100%;
		object-fit: cover;
	}

	.container_image {
		width: 100%;
		height: 244px;
		max-width: 100%;
		object-fit: cover;
	}

	.container_images {
		width: 100%;
		height: 110px;
		max-width: 100%;
		object-fit: cover;
	}

	.header {
	    margin: 0px 10px;
	    height: 102%;
	}

	.top-banner {
		padding: 10px;
		font-size: 12px;
		color: #333;
	}

	.section {
		padding: 10px;
		margin-bottom: 10px;
	}

	.yellow {
		background-color: white;
		display: flex;
		justify-content: space-between;
	}

	.title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.description {
		font-size: 14px;
		color: #666;
	}

	.white {
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
		border-radius: 8px;
	}

	.item {
		flex: 1;
		text-align: center;
		margin: 0 5px;
	}

	.item.large {
		flex: 2;
	}

	.item.small {
		flex: 1;
	}

	.icon {
		margin-bottom: 5px;
	}

	.icon-img {
		width: 30px;
		height: 30px;
	}

.icon-imgs {
		width: 43px;
		height: 43px;
	}
	.text {
		font-size: 12px;
	}

	.beige {
		background-color: #f5f5dc;
		display: flex;
		justify-content: space-between;
		padding: 10px 0;
	}

	.green {
		background-color: #dff0d8;
		text-align: center;
		padding: 20px;
	}

	.center {
		font-size: 16px;
		font-weight: bold;
	}

	// .container {
	// 	display: flex;
	// 	flex-direction: row;
	// 	gap: 20rpx;
	// }

	.left-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.right-column {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 20rpx;
	}

	.box {
		height: 200rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.boxs {
		width: 350rpx;
		height: 459rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}

	.invite {
		background-color: #f2ead5;
	}

	.join-group {
		background-color: #f4ddcd;
	}

	.happy-money {
		background-color: #e0e6da;
	}

	.title {
		font-size: 24rpx;
		font-weight: bold;
	}

	.description {
		font-size: 20rpx;
	}

	.cover-view {
		position: absolute;
		top: 356px;
		left: 50px;
		padding: 10px;
		z-index: 10;
		color: white;
	}

	.qm-banner-underImg {
		position: absolute;
		left: 50%;
		transform: translate(-50%);
	}

	.uperUderImg {
		width: 100%;
		height: 100%;
	}

	.aaaa {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
		width: 100%;
		height: 100%;
		transform: translate(0%, 0) translateZ(0);
		transition: 1s;
	}

	.container1 {
		display: flex;
		flex-direction: row;
		gap: 20rpx;
	}

	.left-column1 {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
	}

	.right-column1 {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 20rpx;
	}

	.box1 {
		height: 96rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
	}

	.boxs1 {
		width: 350rpx;
		height: 248rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.invite1 {
		background-color: #fff;
	}

	.join-group1 {
		background-color: #fff;
	}

	.happy-money1 {
		background-color: #fff;
	}

	.container_image1 {
		width: 100%;
		height: 184px;
		max-width: 100%;
		object-fit: cover;
	}

	.container_images1 {
		width: 100%;
		height: 80px;
		max-width: 100%;
		object-fit: cover;
	}

	.text-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 10px;
	}

	.text-item {
		font-size: 12px;
	}
</style>